<template>
  <div :class="flag?'timeBoxAct':'timeBoxNav'">
    <div class="circle"></div>
    <div class="sjx"></div>
    <div class="box">
      <span>{{time}}</span>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    flag: {
      typeof: Boolean,
      default: false
    },
    time: {
      typeof: String,
      default: ''
    }
  }
})
</script>

<style lang='less' scoped>
.timeBoxAct {
  position: absolute;
  top: 0px;
  left: -6px;
  display: flex;
  align-items: center;
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3072f6;
    z-index: 99;
  }
  .sjx {
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-right: 5px solid #3072f6;
  }
  .box {
    padding: 6px 40px 6px 10px;
    background-color: #3072f6;
    span {
      font-family: 'HarmonyOS Sans SC';
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 19px;
      color: #ffffff;
    }
  }
}
.timeBoxNav {
  position: absolute;
  top: 0px;
  left: -6px;
  display: flex;
  align-items: center;
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d9d9d9;
  }
  .sjx {
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-right: 5px solid #d9d9d9;
  }
  .box {
    padding: 6px 10px;
    background-color: #d9d9d9;
    span {
      font-family: 'HarmonyOS Sans SC';
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: #333333;
    }
  }
}
</style>
